<template>
  <div>
    <div>
      <el-form :inline="true" style="margin: 20px">
        <el-form-item label="年份输入">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            :clearable="false"
            @change="changeYear"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划类型选择">
          <el-select @change="changePlanType" v-model="type" placeholder="计划类型">
            <el-option label="计划类型" value="1"></el-option>
            <el-option label="计划调整类型" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
<!--          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>-->
          <el-button type="primary" icon="el-icon-search" @click="handleAdd">提交</el-button>
          <el-button icon="el-icon-upload" plain type="primary"
                     @click="importFile"
          >非常规投资数据导入
          </el-button>
          <el-button icon="el-icon-upload" plain type="primary"
                     @click="importCgFile"
          >常规投资数据导入
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card>
      <el-table :key="tableKey" show-summary :summary-method="getSummaries" :data="tableData" border style="width: 100%">

        <!-- 第一列数据固定 -->
        <el-table-column width="120" align="center" :label="year + '年'" prop="planType" fixed>

          <!-- 在表头中放置选择框 -->
          <template slot="header">
            <div>
              {{ year }}年
            </div>
            <div>
              {{ type === '1' ? '计划类型' : '计划调整类型' }}
            </div>
          </template>

          <template slot-scope="scope">
            <!-- 根据选择框动态显示内容 -->
            <div v-if="scope.$index === 0">总部年度计划</div>
            <!--          <div v-if="scope.$index === 1">单位</div>-->
            <div v-else-if="scope.$index === 1">{{ completionPeriod }}</div>
            <div v-else>完成比例</div>
          </template>
        </el-table-column>

        <!-- 探明储量 -->
        <el-table-column align="center" label="探明储量" prop="tmcl">
          <el-table-column>
            <el-table-column align="center" label="(万吨)" prop="tmcl">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.tmcl" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.tmcl" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      投资合计-->
        <el-table-column align="center" label="投资合计" prop="tzhj">
          <el-table-column>
            <el-table-column align="center" label="(亿元)" prop="tzhj">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.tzhj" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.tzhj" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      损益-->
        <el-table-column align="center" label="损益" prop="sy">
          <el-table-column>
            <el-table-column align="center" label="(亿元)" prop="sy">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.sy" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.sy" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      物探工程小计-->
        <el-table-column align="center" label="物探工程小计">
          <el-table-column align="center" label="投资" prop="wttz">
            <el-table-column align="center" label="(亿元)" prop="wttz">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.wttz" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.wttz" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="二维" prop="wt2">
            <el-table-column align="center" label="(km)" prop="wt2">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.wt2" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.wt2" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="三维" prop="wt3">
            <el-table-column align="center" label="(km²)" prop="wt3">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.wt3" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.wt3" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      探井工程合计-->
        <el-table-column align="center" label="探井工程合计">
          <el-table-column align="center" label="投资" prop="tjtz">
            <el-table-column align="center" label="(亿元)" prop="tjtz">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.tjtz" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.tjtz" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="tjks">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.tjks" placement="top-start">
                <el-input-number style="width: 100%" v-model="scope.row.tjks" :min="0" :controls="false"></el-input-number>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="tjjc">
            <el-table-column align="center" label="(万米)" prop="tjjc">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.tjjc" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.tjjc" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      东部常规探井-->
        <el-table-column align="center" label="东部常规探井">
          <el-table-column align="center" label="投资" prop="dbtz">
            <el-table-column align="center" label="(亿元)" prop="dbtz">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.dbtz" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.dbtz" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="dbks">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.dbks" placement="top-start">
                <el-input-number style="width: 100%" v-model="scope.row.dbks" :min="0" :controls="false"></el-input-number>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="dbjc">
            <el-table-column align="center" label="(万米)" prop="dbjc">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.dbjc" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.dbjc" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      西部常规探井-->
        <el-table-column align="center" label="西部常规探井">
          <el-table-column align="center" label="投资" prop="xbtz">
            <el-table-column align="center" label="(亿元)" prop="xbtz">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.xbtz" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.xbtz" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="xbks">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.xbks" placement="top-start">
                <el-input-number style="width: 100%" v-model="scope.row.xbks" :min="0" :controls="false"></el-input-number>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="xbjc">
            <el-table-column align="center" label="(万米)" prop="xbjc">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.xbjc" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.xbjc" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      页岩油-->
        <el-table-column align="center" label="页岩油探井">
          <el-table-column align="center" label="投资" prop="yyytz">
            <el-table-column align="center" label="(亿元)" prop="yyytz">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.yyytz" placement="top-start">
                 <el-input-number style="width: 100%" v-model="scope.row.yyytz" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="yyyks">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.yyyks" placement="top-start">
                <el-input-number style="width: 100%" v-model="scope.row.yyyks" :min="0" :controls="false"></el-input-number>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="yyyjc">
            <el-table-column align="center" label="(万米)" prop="yyyjc">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.yyyjc" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.yyyjc" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      其他探勘工程-->
        <el-table-column align="center" label="其他探勘工程">
          <el-table-column align="center" label="投资" prop="qttz">
            <el-table-column align="center" label="(亿元)" prop="qttz">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.qttz" placement="top-start">
                  <el-input-number style="width: 100%" v-model="scope.row.qttz" :min="0" :controls="false"></el-input-number>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="qtbz">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.qtbz" placement="top-start">
                <el-input-number style="width: 100%" v-model="scope.row.qtbz" :min="0" :controls="false"></el-input-number>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

    </el-card>




    <!-- 文件上传|修改 -->
<!--    <el-dialog :close-on-click-modal="false" title="数据导入" :visible.sync="addDataVisible" append-to-body width="500px">-->
<!--      <div>-->
<!--        <el-upload-->
<!--          class="upload-demo"-->
<!--          ref="upload"-->
<!--          action=" "-->
<!--          :auto-upload="false"-->
<!--          :on-change="handleChange"-->
<!--          :file-list="fileList">-->
<!--          <i class="el-icon-upload"></i>-->
<!--          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx/csv文件，且列名不能重复</div>-->
<!--        </el-upload>-->
<!--      </div>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submit">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
    <!--费用导入-->
    <el-dialog :close-on-click-modal="false" title="非常规投资数据导入" :visible.sync="addDataVisible" append-to-body width="500px">
      <el-form ref="formCost"  label-width="80px">
        <el-form-item label="费用导入" prop="path">
          <el-upload ref="uploadRef" :action="uploadUrl" :data="uploadData" :headers="headers" :http-request="chunkUpload"
                     :on-error="onError" :on-success="handleSuccess" accept=".xlsx, .xls, .csv" class="upload-demo" drag
                     name="file"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx/csv文件，且列名不能重复</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCostForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>




<!--    常规-->
    <el-dialog :close-on-click-modal="false" title="常规投资数据导入" :visible.sync="cgDialog" append-to-body width="500px">
      <el-form ref="formCost"  label-width="80px">
        <el-form-item label="费用导入" prop="path">
          <el-upload ref="uploadRef" :action="uploadUrl" :data="uploadData" :headers="headers" :http-request="chunkUpload"
                     :on-error="onError" :on-success="handleSuccess" accept=".xlsx, .xls, .csv" class="upload-demo" drag
                     name="file"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx/csv文件，且列名不能重复</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCostCgForm">确 定</el-button>
        <el-button @click="closeCgDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listInvestType,
  addInvestType,
  delInvestType,
  editInvestType,
  addWelloil,
  addcgWelloil
} from "@/api/vadmin/process/invest/investapi";
import { Decrypt } from "@/utils/AesHmacMD5";
import { getToken } from "@/utils/auth";
import chunkUpload from "@/utils/chunkUpload";
import { addType } from "@/api/vadmin/budget/ledger/ledgerapi";
export default {
  name:'completionStatus',
  data() {
    return {
      tableKey: Math.random(), //解决在el-table中，如果数据更新了，但是表格没有重新渲染的问题
      type: '1', // 默认值为计划类型
      year: new Date().getFullYear() + '', //年份
      //如何默认当前年份

      tableData: [
        {
          tmcl : 0, //探明储量
          tzhj : 0, //投资合计
          sy : 0, //损益
          wttz : 0, //物探投资
          wt2 : 0, //物探二维
          wt3 : 0, //物探三维
          tjtz : 0, //探井投资
          tjks : 0, //探井口数
          tjjc :0, //探井进尺
          dbtz : 0, //东部投资
          dbks : 0, //东部口数
          dbjc :0, //东部进尺
          xbtz : 0, //西部投资
          xbks : 0, //西部口数
          xbjc  : 0, //西部进尺
          yyytz : 0, //页岩油投资
          yyyks : 0, //页岩油口数
          yyyjc : 0, //页岩油进尺
          qttz : 0, //其他投资
          qtbz : 0, //其他备注
        },
        {
          tmcl : 0, //探明储量
          tzhj : 0, //投资合计
          sy : 0, //损益
          wttz : 0, //物探投资
          wt2 : 0, //物探二维
          wt3 : 0, //物探三维
          tjtz : 0, //探井投资
          tjks : 0, //探井口数
          tjjc :0, //探井进尺
          dbtz : 0, //东部投资
          dbks : 0, //东部口数
          dbjc :0, //东部进尺
          xbtz : 0, //西部投资
          xbks : 0, //西部口数
          xbjc  : 0, //西部进尺
          yyytz : 0, //页岩油投资
          yyyks : 0, //页岩油口数
          yyyjc : 0, //页岩油进尺
          qttz : 0, //其他投资
          qtbz : 0, //其他备注
        },
      ],
      addDataVisible:false,
      cgDialog:false, //常规
      // fileList: [],  // 存储选择的文件
      // loading: false,  // 上传按钮的加载状态



      //新文件上传
      chunkUpload: chunkUpload, // 文件上传
      uploadUrl: process.env.VUE_APP_BASE_API + "/admin/system/upload_fileM/", //文件上传的路径
      uploadData: {},
      headers: {
        Authorization: "Bearer " + getToken()
      },
      filePath: ''
    };
  },
  computed: {
    // 动态显示完成时间
    completionPeriod() {
      return this.type === '1' ? '1-9月完成' : '1-12月完成';
    },
  },
  mounted() {
    //进入页面查询当前年份信息
    this.changeYear(this.year)
  },
  methods: {

    importCgFile() {
      this.cgDialog = true
    },
    submitCostCgForm() {
      console.log(this.uploadData,'===>');
      addcgWelloil({path: this.filePath}).then(response => {
        this.msgSuccess(response.msg);
        this.cgDialog = false
      });
    },
    closeCgDialog() {
      this.cgDialog = false
      this.$refs.uploadRef.clearFiles();
    },


    closeDialog() {
      this.addDataVisible = false
      this.$refs.uploadRef.clearFiles();
    },
    onError() {
      this.form.path = undefined;
      this.$message.error("文件上传失败！");
      this.$refs.uploadRef.clearFiles();
    },
    /** 文件上传成功调用的钩子函数 */
    handleSuccess(data) {
      console.log(data);
      this.filePath = data.saveFile
      this.$message.success("文件上传成功！");
    },
    submitCostForm() {
      console.log(this.uploadData,'===>');
      addWelloil({path: this.filePath}).then(response => {
        this.msgSuccess(response.msg);
        this.addDataVisible = true
      });
    },



    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    //数据导入
    importFile() {
      this.addDataVisible = true;
    },
    submit() {
      // 显示加载状态
      this.loading = true;
      // 获取文件
      const file = this.fileList[0].raw;
      // 创建 FormData 对象
      const formData = new FormData();
      formData.append('file', file);
      addWelloil(formData).then(res => {
        console.log(res);
      })
    },
    getList() {
      listInvestType({year:this.year,type:this.type}).then(res => {
        // console.log(JSON.parse(Decrypt(res.data)).results);
        //不是空数组的时候赋值,否则会空 无法填写
        if(JSON.parse(Decrypt(res.data)).results.length > 0) {
          this.tableData = JSON.parse(Decrypt(res.data)).results;
        }else {
          this.tableData =  [
            {
              tmcl : 0, //探明储量
              tzhj : 0, //投资合计
              sy : 0, //损益
              wttz : 0, //物探投资
              wt2 : 0, //物探二维
              wt3 : 0, //物探三维
              tjtz : 0, //探井投资
              tjks : 0, //探井口数
              tjjc :0, //探井进尺
              dbtz : 0, //东部投资
              dbks : 0, //东部口数
              dbjc :0, //东部进尺
              xbtz : 0, //西部投资
              xbks : 0, //西部口数
              xbjc  : 0, //西部进尺
              yyytz : 0, //页岩油投资
              yyyks : 0, //页岩油口数
              yyyjc : 0, //页岩油进尺
              qttz : 0, //其他投资
              qtbz : 0, //其他备注
            },
            {
              tmcl : 0, //探明储量
              tzhj : 0, //投资合计
              sy : 0, //损益
              wttz : 0, //物探投资
              wt2 : 0, //物探二维
              wt3 : 0, //物探三维
              tjtz : 0, //探井投资
              tjks : 0, //探井口数
              tjjc :0, //探井进尺
              dbtz : 0, //东部投资
              dbks : 0, //东部口数
              dbjc :0, //东部进尺
              xbtz : 0, //西部投资
              xbks : 0, //西部口数
              xbjc  : 0, //西部进尺
              yyytz : 0, //页岩油投资
              yyyks : 0, //页岩油口数
              yyyjc : 0, //页岩油进尺
              qttz : 0, //其他投资
              qtbz : 0, //其他备注
            },
          ]
        }
      })
    },
    handleAdd(){
      debugger
      addInvestType({table:this.tableData,year:this.year,type:this.type}).then(response => {
        console.log(response);
        if(res.code === 200) {
          this.msgSuccess('提交成功');
        }
      });
    },
    //比例计算
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '完成比例';
          return;
        }

        // 获取列名
        const property = column.property;

        // 获取两个数据项
        const value1 = parseFloat(data[0][property]);
        const value2 = parseFloat(data[1][property]);

        // 判断是否为有效数值
        if (!isNaN(value1) && !isNaN(value2) && value1 !== 0) {
          // 根据列名进行不同的完成比例计算
          if (property === 'tzhj') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else if (property === 'sy') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else if (property === 'wttz') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else if (property === 'tjtz') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else if (property === 'dbtz') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else if (property === 'xbtz') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else if (property === 'yyytz') {
            sums[index] = `${((value2 / value1) * 100).toFixed(0)}%`;
          } else {
            sums[index] = '';
          }
        } else {
          // 如果数据无效或为 0，则不计算比例，显示为空
          sums[index] = '';
        }
      });

      return sums;
    },
    changePlanType() {
      this.tableKey = Math.random()
      this.getList();
    },
    changeYear() {
      this.tableKey += 1;  // 强制表格重新渲染
      console.log(this.year);
      this.getList();
    },

  }
};
</script>
<style lang="scss" scoped>
::v-deep {
    .el-input-number.is-without-controls .el-input__inner {
      border: none !important;
    }
    .el-input-number {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
}
</style>
